<template>
  <MainContainer class="p-5">
    <div class="flex">
      <el-button type="primary" @click="synchronousElevator()"
        >同步电梯</el-button
      >
    </div>
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import { getElevator, syncElevator } from "@/api/elevator";
import { useRoute } from "vue-router";
const columns = [
  {
    prop: "id",
    label: "编号",
  },
  {
    prop: "deviceName",
    label: "设备名称",
  },
  {
    prop: "deviceUnique",
    label: "设备编码",
  },
  {
    prop: "unitName",
    label: "设备类型",
  },
];

let route = useRoute();

async function synchronousElevator() {
  loading.value = true;
  try {
    await syncElevator(route.query.id);
    loading.value = false;
    handleQuery();
  } catch {
    loading.value = false;
  }
}

const crudOptions = {
  queryApi: getElevator,
};
const { params, handleQuery, list, loading, total } = useCRUD(crudOptions);

handleQuery();
</script>
